<template>
  <view class="good-box"
        :hover-class="!showRadio ? 'navigator-hover' : ''"
        @click="goodItemClick()">
    <view class="good-img-box">
      <radio v-if="showRadio"
             :checked="goodData.goods_state"
             color="#c00000"
             @click="radioClick">
      </radio>
      <image :src="goodData.goods_small_logo | judgeImg"
             mode="scaleToFill"
             @click="goodItemClick(true)">
      </image>
    </view>
    <view class="good-info-box">
      <view class="good-title"
            @click="goodItemClick(true)">
        {{goodData.goods_name}}
      </view>
      <view class="price-box">
        <!-- 价格 -->
        <view class="good-price">
          ￥{{goodData.goods_price | toFixed}}
        </view>
        <!-- 数量加减控件 -->
        <uni-number-box v-if="showNumberBox"
                        :value="goodData.goods_count"
                        :min="1"
                        :max="999"
                        @change="numberChange">
        </uni-number-box>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "good-item",
    props: {
      // 商品数据
      goodData: {
        type: Object,
        default: {}
      },
      // 是否显示单选框
      showRadio: {
        type: Boolean,
        default: false
      },
      // 是否显示数量加减控件
      showNumberBox: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      /**
       * 商品列表项点击事件
       * @param {Boolen} flag 为true时强制跳转（用于点击图片或标题跳转）
       */
      goodItemClick(flag) {
        // 如果页面显示radio，则只允许点击图片或标题跳转
        if (this.showRadio && !flag)
          return
        uni.navigateTo({
          url: `/subpack/good_detail/good_detail?goods_id=${this.goodData.goods_id}`
        })
      },
      /**
       * redio点击事件
       */
      radioClick() {
        // 触发radio-change事件，将商品id和新状态传递
        this.$emit('radio-change', {
          goods_id: this.goodData.goods_id,
          goods_state: !this.goodData.goods_state
        })
      },
      /**
       * uni-number-box数量改变事件
       * @param {Object} value 改变后的数量
       */
      numberChange(value) {
        this.goodData.goods_count = value
        // 触发number-change事件，将商品id和新数量传递
        this.$emit('number-change', {
          goods_id: this.goodData.goods_id,
          goods_count: this.goodData.goods_count
        })
      }
    },
    filters: {
      /**
       * 判断图片是否存在
       * @param {string} src 图片src
       */
      judgeImg(src) {
        if (src && src !== '')
          return src
        return getApp().globalData.errImg
      },
      /**
       * 保留两位小数
       */
      toFixed(num) {
        return parseFloat(num).toFixed(2)
      },
      /**
       * 限制文本长度为num，超出部分显示...
       */
      size(str, num) {
        // 由于英文只占半个中文宽度，所以需要将文本长度num换算为中文宽度数
        let strLength = 0
        let resultStr = ''
        for (let item of str) {
          if (strLength > num)
            return resultStr + '...'
          // 获取字符编码
          let charCode = item.charCodeAt(0)
          if (charCode >= 0 && charCode <= 128)
            strLength += 0.5
          else
            strLength += 1
          resultStr += item
        }
        return str
      }
    }
  }
</script>

<style lang="scss">
  .good-box {
    padding: 16rpx 10rpx;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;

    .good-img-box {
      width: 240rpx;
      display: flex;
      align-items: center;

      radio {
        margin-right: 14rpx;
      }

      image {
        display: block;
        width: 100%;
        height: 180rpx;
      }
    }

    .good-info-box {
      padding-left: 30rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .good-title {
        font-size: 30rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .good-price {
          font-size: 32rpx;
          color: #c00000;
        }
      }
    }
  }
</style>
